<template>
  <a-spin :spinning="confirmLoading" style="background: #fff">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
        <a-row :gutter="48">
          <a-col :span="24">
            <a-form-model-item label="督办时间" prop="superviseTime">
              <!-- :disabled-date="disabledExpectUseTime" -->
              <a-date-picker
                style="width: 100%"
                placeholder="请选择督办时间"
                @change="handleExpectUseTimeChange"
                v-model="model.superviseTime"
                format="YYYY-MM-DD"
                :getCalendarContainer="(node)=>{return node.parentNode}"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="督办结果" prop="superviseRes">
              <a-textarea :max-length="200" v-model="model.superviseRes" rows="4" placeholder="请输入督办结果"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="督办人" prop="superviseUserId">
              {{filterMultiDictText(dictOptions['superviseUserId'], model.superviseUserId + '')}}
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { viewFile } from '@/utils/util'
  import { mapGetters } from 'vuex';
  import moment from 'moment';
  import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
  import { filterMultiDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'
import { preventSelection } from '@fullcalendar/core';
  export default {
    name: 'SupervisionListForm',
    mixins: [viewFile],
    components: {
      SelectUserByDep,
    },
    props: {
      // 流程表单data
      formData: {
        type: Object,
        default: () => {},
        required: false
      },
      // 表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      // 表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    watch: {
      activeKey(key) {
        this.$forceUpdate()
      }
    },
    data () {
      return {
        filterMultiDictText,
        modelExpectUseTime: null,
        activeKey: ['1'],
        model: {
          superviseRes: '', // 督办结果
          superviseTime: '', // 督办时间
          superviseUserId: '', // 督办人
          superviseUserName: '', // 督办人
        },
        labelCol: {
        },
        dictOptions: {},
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 }
        },
        confirmLoading: false,
        validatorRules: {
          // superviseUserId: [
          //   { required: true, message: '请选择督办人!', trigger: 'change' }
          // ],
          superviseTime: [
            { required: true, message: '请选择督办时间!', trigger: 'change' }
          ],
          // superviseRes: [
          //     { required: true, message: '请输入督办结果!', trigger: 'blur' }
          // ]
        },
        url: {
          add: '/api/erp/audit/erpAuditSupervise/add',
          edit: '/api/erp/audit/erpAuditSupervise/edit',
          queryById: '/api/erp/audit/erpAuditSupervise/queryById',
          gainBillNo: '/api/erp/purchase/procurement/erpPurchaseApplyForm/gainBillNo',
          queryProvisionBroadList: '/api/erp/purchase/material/erpMaterialCategory/queryAllParent'
        },
        details: [],
        provisionBroadList: [], // 采购大类
        showBusinessSegment: false,// 是否显示所属业务板块隐藏
      }
    },
    computed: {
      formDisabled() {
        if (this.formBpm === true) {
          if (this.formData.disabled === false) {
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton() {
        if (this.formBpm === true) {
          if (this.formData.disabled === false) {
            return true
          }
        }
        return false
      }
    },
    created () {
       // 备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.initDictConfig();
    },
    methods: {
      ...mapGetters(['userInfo']),
      // 期望到货时间
      handleExpectUseTimeChange (mom, dateStr) {
        this.modelExpectUseTime = dateStr
      },
      initDictConfig() {
      initDictOptions('erp_employee_file,name,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'superviseUserId', res.result)
        }
      })
    },
      disabledExpectUseTime (current) {
        return current && current <= moment().endOf('day');
      },
      add (record) {
        this.modelDefault.superviseUserId = this.userInfo().empId; // 当前登录人
        this.modelDefault.handlerDeptId = this.userInfo().deptId; // 当前登录人部门
        this.modelDefault.createTime = moment().format('YYYY-MM-DD HH:mm:ss'); // 申请时间
        this.modelDefault.collectMoney = record.collectMoney // 应收金额
        this.modelDefault.paymentId = record.paymentId // 	款项id
        this.modelDefault.projectLeader = record.projectLeading // 	项目负责人
        this.modelDefault.realMoney = record.realCollectMoney // 	实收金额
        this.modelDefault.taskId = record.taskId //	任务id
        this.modelDefault.undertaker = record.undertaker // 项目承接人
        this.edit(this.modelDefault);
        this.modelExpectUseTime = null
      },
      async edit (record) {
        await this.$refs['form'].clearValidate();
        this.model = await Object.assign({}, record);
        this.modelExpectUseTime = moment(record.superviseTime).format('YYYY-MM-DD');
        this.visible = true;
      },
      submitForm() {
        const that = this;
        // 触发表单验证
          this.$refs.form.validate(valid => {
            if (valid) {
              that.submit()
            } else {
              that.$emit('unButtonDisable')
            }
          })
      },
      submit () {
        const that = this;
        that.confirmLoading = true;
        let httpurl = '';
        let method = '';
        if (!this.model.id) {
          httpurl += this.url.add;
          method = 'post';
        } else {
          httpurl += this.url.edit;
          method = 'put';
        }
        this.model.superviseTime = this.modelExpectUseTime
        httpAction(httpurl, this.model, method).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            if (method == 'post') {
              that.model.id = res.result;
            }
            that.$emit('ok', that.model);
          } else {
            that.$message.warning(res.message);
            that.$emit('unButtonDisable');
          }
        }).catch((error) => {
          that.$emit('unButtonDisable', error);
        }).finally(() => {
          that.confirmLoading = false;
        })
      }
    }
  }
</script>
<style>
  @import "../../../../../utils/print.css";
  .print_style{
  position: absolute;
  top: 0;
  z-index: -1111;
}
</style>